<template>
	<view class="color-panel" :class="{'color-panel-show': colorPanelShow}">
		<view class="color-section">
			<view @click="colorPickAction(item)" :style="{backgroundColor: item.color}" v-for="(item, index) in colorArr" :key="index" class="color-item">
				<text class="color-title">{{item.index}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default  {
		props: {
			colorPanelShow: {
				type: Boolean,
				default () {
					return false;
				}
			}
		},
		data () {
			return {
				colorArr: [
					{
						color: '#7f2a3f',
						index: '01'
					}, {
						color: '#e24187',
						index: '03'
					}, {
						color: '#f5305d',
						index: '04'
					}, {
						color: '#de4156',
						index: '05'
					}, {
						color: '#fe42cd',
						index: '06'
					}, {
						color: '#f48b9a',
						index: '07'
					}, {
						color: '#ec8191',
						index: '08'
					}, {
						color: '#f9aeb5',
						index: '09'
					}, {
						color: '#f21d5f',
						index: '10'
					}, {
						color: '#cc3739',
						index: '11'
					}, {
						color: '#dd5047',
						index: '12'
					}, {
						color: '#e24187',
						index: '13'
					}, {
						color: '#fa6449',
						index: '14'
					}, {
						color: '#e8495b',
						index: '15'
					}, {
						color: '#fb7162',
						index: '16'
					}, {
						color: '#f6afd1',
						index: '17'
					}, {
						color: '#fbb6b9',
						index: '18'
					}, {
						color: '#db6f27',
						index: '21'
					}, {
						color: '#ed702e',
						index: '22'
					}, {
						color: '#f99627',
						index: '23'
					}, {
						color: '#eb8926',
						index: '24'
					}, {
						color: '#edc3aa',
						index: '25'
					}, {
						color: '#e1d8cf',
						index: '26'
					}, {
						color: '#deebc5',
						index: '27'
					}, {
						color: '#fccdc7',
						index: '28'
					}, {
						color: '#dbbdd2',
						index: '29'
					}, {
						color: '#e8a321',
						index: '31'
					}, {
						color: '#db6f27',
						index: '32'
					}, {
						color: '#edb74b',
						index: '33'
					}, {
						color: '#e8b741',
						index: '34'
					}, {
						color: '#fef052',
						index: '35'
					}, {
						color: '#ffd684',
						index: '36'
					}, {
						color: '#e2d958',
						index: '37'
					}, {
						color: '#e2e5d0',
						index: '38'
					}, {
						color: '#ba9431',
						index: '41'
					}, {
						color: '#797f5d',
						index: '42'
					}, {
						color: '#536d50',
						index: '43'
					}, {
						color: '#d8b53f',
						index: '44'
					}, {
						color: '#d4c172',
						index: '45'
					}, {
						color: '#32b75c',
						index: '46'
					}, {
						color: '#90D15B',
						index: '47'
					}, {
						color: '#c5d52a',
						index: '48'
					}, {
						color: '#e8e098',
						index: '49'
					}, {
						color: '#1b6661',
						index: '50'
					}, {
						color: '#3b4f4d',
						index: '51'
					}, {
						color: '#336559',
						index: '52'
					}, {
						color: '#01776e',
						index: '53'
					}, {
						color: '#2e7662',
						index: '54'
					}, {
						color: '#439877',
						index: '55'
					}, {
						color: '#0ba066',
						index: '56'
					}, {
						color: '#318488',
						index: '57'
					}, {
						color: '#6fd3c9',
						index: '58'
					}, {
						color: '#b9d3ac',
						index: '59'
					}, {
						color: '#0e898e',
						index: '61'
					}, {
						color: '#317194',
						index: '62'
					}, {
						color: '#029bc7',
						index: '63'
					}, {
						color: '#2a8ec9',
						index: '64'
					}, {
						color: '#57c9d3',
						index: '65'
					}, {
						color: '#65b3df',
						index: '67'
					}, {
						color: '#8bd0d7',
						index: '68'
					}, {
						color: '#4B4881',
						index: '69'
					}, {
						color: '#77A1CB',
						index: '70'
					}, {
						color: '#3051BB',
						index: '71'
					}, {
						color: '#2E41A7',
						index: '72'
					}, {
						color: '#704CAE',
						index: '73'
					}, {
						color: '#385BD1',
						index: '74'
					}, {
						color: '#E0DFED',
						index: '75'
					}, {
						color: '#A6BDE9',
						index: '76'
					}, {
						color: '#B3B9DD',
						index: '77'
					}, {
						color: '#7942A8',
						index: '81'
					}, {
						color: '#8F52BA',
						index: '82'
					}, {
						color: '#9680C0',
						index: '83'
					}, {
						color: '#CD82BB',
						index: '84'
					}, {
						color: '#8E2A80',
						index: '85'
					}, {
						color: '#E24CB0',
						index: '86'
					}, {
						color: '#CC2A75',
						index: '87'
					}, {
						color: '#ED89D2',
						index: '88'
					}, {
						color: '#F562B6',
						index: '89'
					}, {
						color: '#8B3B32',
						index: '91'
					}, {
						color: '#593A35',
						index: '92'
					}, {
						color: '#7A3C2D',
						index: '93'
					}, {
						color: '#7D2E21',
						index: '94'
					}, {
						color: '#935A47',
						index: '95'
					}, {
						color: '#A05047',
						index: '96'
					}, {
						color: '#E39476',
						index: '97'
					}, {
						color: '#4E3F3C',
						index: '98'
					}, {
						color: '#5A4939',
						index: '99'
					}, {
						color: '#EDE8EC',
						index: '100'
					}, {
						color: '#C0813A',
						index: '101'
					}, {
						color: '#77432E',
						index: '102'
					}, {
						color: '#C17748',
						index: '103'
					}, {
						color: '#C7AC39',
						index: '104'
					}, {
						color: '#DBA179',
						index: '107'
					}, {
						color: '#D8D3D0',
						index: '109'
					}, {
						color: '#091A22',
						index: '120'
					}, {
						color: '#CA3A32',
						index: '121'
					}, {
						color: '#FAAB60',
						index: '122'
					}, {
						color: '#CADEAD',
						index: '123'
					}, {
						color: '#C7D858',
						index: '124'
					}, {
						color: '#F264D0',
						index: '125'
					}, {
						color: '#F77ADC',
						index: '126'
					}, {
						color: '#FAE7D9',
						index: '131'
					}, {
						color: '#E6D9D1',
						index: '132'
					}, {
						color: '#EBCDB1',
						index: '133'
					}, {
						color: '#E2DCCC',
						index: '134'
					}, {
						color: '#FAD9D2',
						index: '135'
					}, {
						color: '#E1C2BD',
						index: '136'
					}, {
						color: '#E5BBCF',
						index: '137'
					}, {
						color: '#F7BACC',
						index: '138'
					}, {
						color: '#E9CBC1',
						index: '139'
					}, {
						color: '#EBB89F',
						index: '140'
					}, {
						color: '#E6D09E',
						index: '141'
					}, {
						color: '#E2B78D',
						index: '142'
					}, {
						color: '#D1E4EB',
						index: '143'
					}, {
						color: '#B9D9EE',
						index: '144'
					}, {
						color: '#CFD0E2',
						index: '145'
					}, {
						color: '#CECFF0',
						index: '146'
					}, {
						color: '#D6C3E3',
						index: '147'
					}, {
						color: '#E3F0C5',
						index: '163'
					}, {
						color: '#DAD792',
						index: '164'
					}, {
						color: '#D4D4BC',
						index: '166'
					}, {
						color: '#C0D0AB',
						index: '167'
					}, {
						color: '#D7C6A8',
						index: '169'
					}, {
						color: '#D9E9E8',
						index: '171'
					}, {
						color: '#B4E0C7',
						index: '172'
					}, {
						color: '#D6E2BA',
						index: '173'
					}, {
						color: '#E3E5D0',
						index: '174'
					}, {
						color: '#C1D39A',
						index: '175'
					}, {
						color: '#AFE4E6',
						index: '178'
					}, {
						color: '#92DDE2',
						index: '179'
					}, {
						color: '#DBE0E6',
						index: '182'
					}, {
						color: '#8FBFF0',
						index: '183'
					}, {
						color: '#9DCDE1',
						index: '185'
					}, {
						color: '#BBC4BF',
						index: '196'
					}, {
						color: '#E484A9',
						index: '198'
					}, {
						color: '#BBC4BF',
						index: 'GG3'
					}, {
						color: '#494A4C',
						index: 'CG9'
					}, {
						color: '#C2CEDA',
						index: 'BG1'
					}, {
						color: '#C1C3D3',
						index: 'BG3'
					}, {
						color: '#8696A3',
						index: 'BG5'
					}, {
						color: '#646A76',
						index: 'BG7'
					}, {
						color: '#415361',
						index: 'BG9'
					}, {
						color: '#DFDEE3',
						index: 'WG.5'
					}, {
						color: '#CBC6CC',
						index: 'WG1'
					}, {
						color: '#B6B0B2',
						index: 'WG2'
					}, {
						color: '#C5BBBA',
						index: 'WG3'
					}, {
						color: '#958A92',
						index: 'WG4'
					}, {
						color: '#837477',
						index: 'WG5'
					}, {
						color: '#8A7E7E',
						index: 'WG6'
					}, {
						color: '#4D4342',
						index: 'WG9'
					}
				]
			}
		},
		methods: {
			colorPickAction (color) {
				this.$emit('colorPickTap', color);
			}
		}
	}
</script>

<style lang="scss">
	.color-panel {
		position: absolute;
		left: 0;
		bottom: 0;
		right: 0;
		top: 145px;
		display: none;
		z-index: 10;
		
		.color-section {
			display: flex;
			flex-wrap: wrap;
			
			.color-item {
				width: 10vw;
				height: 10vw;
				display: flex;
				justify-content: center;
				align-items: center;
				
				.color-title {
					color: #fff;
					font-size: $uni-font-size-sm;
				}
			}
		}
	}
	
	.color-panel-show {
		background-color: rgba(0, 0, 0, .6);
		display: block;
	}
</style>
